
/* Varibles
/********************************************/
$main-color: #508051;
$header-color: white;
$header-background-color: $main-color;
$nav-link-color: $header-color;
$nav-sub-background: rgba(0, 0, 0, 0.85);
$a-color: #80246B;
$default-font-size: 14px;
$header-height: 40px;
$map-locations-list-icon-width: $header-height;
$logo-height: 28px;


/* Mixins
/********************************************/
@mixin transition($attribute) {
    -moz-transition: $attribute;
    -o-transition: $attribute;
    -ms-transition: $attribute;
	-webkit-transition: $attribute;
    transition: $attribute;
}
@mixin box-sizing($attribute) {
	-moz-box-sizing: $attribute;
	-webkit-box-sizing: $attribute;
	box-sizing: $attribute;
}

%clearfix {
	&:before,
	&:after {
	    content: " ";
	    display: table;
	}

	&:after {
	    clear: both;
	}
}


/* General styles
/********************************************/
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	font-family: sans-serif;
	font-size: $default-font-size;
}

a {
	color: $a-color;
}

input[type=search] {
	width: 100%;
}
hr {
	border: none;
	border-top: 1px solid $main-color;
}


/* Top header bar
/********************************************/
#header {
	color: $header-color;
	line-height: 1em;
	background: $header-background-color;
	background: rgba(80, 128, 81, 0.75);
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
}


/* Logtype
/********************************************/
#logo {
	text-align: center;
	float: left;

	a {
		background: url('logo-slim-28.png') no-repeat center center;
		background-image: -webkit-image-set(url('logo-slim-28.png') 1x, url('logo-slim-28@2x.png') 2x);
		display: block;
		width: 28px;
		height: $logo-height;
		padding: (($header-height - $logo-height) / 2) 1em;
	}
	
	&.icon-spinner {
		width: 28px;
		padding: (($header-height - $default-font-size) / 2) 1em;
		
		a {
			display: none;
		}
	}
}

/* Navigation
/********************************************/
#nav {
	color: $nav-link-color;
	list-style: none;
	padding: 0;
	margin: 0;
	float: right;
	
	> li {
		float: left;
		> a {
			padding: (($header-height - $default-font-size) / 2) 1em;
		}
		
		&.active { 
			background: rgba(0, 0, 0, 0.25);
			
			ul {
				display: block;
			}
		}
	}
	
	ul {
		background: $nav-sub-background;
		list-style: none;
		display: none;
		padding: 1em;
		margin: 0;
		position: absolute;
		right: 0;
		left: 0;
		z-index: 9;
		
		li {
			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
			
			&:last-child {
				border-bottom: 0;
			}
		}
		
		a {
			padding: 1em;
		}
	}
	
	a {
		color: $nav-link-color;
		text-decoration: none;
		display: block;
	}
}


/* Headers
/********************************************/
h1 {
	margin: 0 0 0.8em 0;
	color: $main-color;
}
h2 {
	margin: 0.8em 0;
	color: $main-color;
}


/* Page content
/********************************************/
.page {
	min-height: 100%;
}
.page.text-content {
	margin-top: $header-height;
	padding: 1em;
}


/* Map Canvas
/********************************************/
#map-canvas { height: 100%; }


/* Map locations list
/********************************************/
#map-locations-list {
	color: $nav-link-color;
	width: $map-locations-list-icon-width;
	position: absolute;
	top: $header-height;
	right: 0;
	bottom: 0;
	z-index: 2;
    @include transition(width 1s ease);
    
    &.open {
    	width: 500px;

    	#map-locations-list-content ul {
			overflow-y: auto;
    		display: block;
    		height: 100%;
    	}
    }
}
#map-locations-list-icon {
	text-align: center;
	background: $nav-sub-background;
	width: 1em;
	padding: (($map-locations-list-icon-width - $default-font-size) / 2);
	float: left;
}
#map-locations-list-content {
	background: $nav-sub-background;
	position: absolute;
	top: 0;
	right: 0;
	left: $map-locations-list-icon-width;
	bottom: 0;
	
	ul {
		display: none;
		list-style: none;
		padding: 1em;
		margin: 0;
		@include box-sizing(border-box);
		
		li {
			cursor: pointer;
			padding: 0.5em;
			font-size: 1em;
			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
			
			&:last-child {
				border-bottom: 0;
			}
		}
		span {
			float: right;
			margin-left: 1em;
			font-weight: bold;
		}
	}
}


/* Position list
/********************************************/
#position-list {
	ul {
		list-style: none;
		padding: 0.5em;
		background: #eee;
	}
	li {
		padding: 0.5em;
		border-bottom: 1px solid #ccc;
		
		&:last-child {
			border-bottom: 0;
		}
	}
	span {
		float: right;
		margin-left: 1em;
		font-weight: bold;
	}
}

/* Description list
/********************************************/
.description-list {
	list-style: none;
	padding: 0;

	ul {
		list-style: none;
		padding: 0;
	}
	.attr-name {
		font-weight: bold;
	}
	#attre-value-days, #attre-value-time {
		text-transform: lowercase;
	}
	.available, .not-available {
		background-size: contain;
		background-repeat: no-repeat;
		float: right;
		padding: 0 5px 0 20px;
		font-style: italic;
	}
	.available {
		background-image: url(hjartstartGreen.png);		
	}
	.not-available {
		background-image: url(hjartstartGrey.png);		
	}
}


/* Icons
/********************************************/
.icon-large {
	font-size: 3em;
}